import React from 'react';
import http from '../utils/http';
import { message } from 'antd';
require('../styles/pc/css/common.css');
require('../styles/pc/css/login.css');

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                username: '',
                password: '',
                verifyCode: ''
            },
            verifySrc: 'http://127.0.0.1:8070/captcha'
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.changeVerify = this.changeVerify.bind(this);
    }
    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        let form = this.state.form;
        form[name] = value;
        this.setState({ form });
    }
    changeVerify() {
        this.setState({
            verifySrc: 'http://127.0.0.1:8070/captcha?' + Math.random()
        });
    }
    handleSubmit() {
        let state = this.state;
        if (state.form.username.length === 0 || state.form.password.length === 0) {
            message.error('用户名或密码不能为空');
            return
        }
        let obj = state.form;
        http.post("index/login", obj, { emulateJSON: true, emulateHTTP: true })
            .then(
                res => {
                    let data = res.data;
                    console.log(data);
                    if (data && data.status === 1) {
                        // Auth.login(data.data.user);
                        // this.$router.push({ path: '/index/index' });
                        // this.$Message.success(data.msg);
                    } else {
                        message.error(data.msg);
                    }
                },
                err => {
                    message.error('请求错误');
                }
            );
    }

    render() {
        return (
        <div className="register_bac">
            <div className="logo_in">
              <div className="logo_top">
                  <p className="reg_tit">绵阳市计量测试所综合办公信息管理系统</p>
              </div>
              <div className="form_logo clearfix">
                <form>
                  <div className="form-group has-feedback from_style1">
                       <label htmlFor="exampleInputName">用户名</label>
                    <input type="text" className="form-control" placeholder="用户名" name="username" value={this.state.form.username} onChange={this.handleInputChange}/>
                  </div>
                  <div className="form-group has-feedback from_style1">
                      <label htmlFor="exampleInputPassword">密码</label>
                    <input type="password" className="form-control" placeholder="密码" name="password" value={this.state.form.password} onChange={this.handleInputChange}/>
                  </div>
                  <div className="form-group clearfix">
                      <div className="form-group has-feedback from_style">
                        <input type="text" className="form-control" value={this.state.form.verifyCode} name="verifyCode" onChange={this.handleInputChange}/>
                      </div>
                      <div className="auth_code">
                      <img src={this.state.verifySrc} alt="" onClick={this.changeVerify} className="img-responsive"/>
                          </div>
                  </div>
                  <div className="form-group1">
                      <button type="button" onClick={this.handleSubmit}>提交</button>
                      <button className="del">取消</button>
                  </div>
                </form>  
              </div>
            </div>
            <div className="img-box-shadow">
                  <img src={require('../styles/pc/img/88.png')} alt=""/>
              </div>
          </div>
        );
    }
}

Login.defaultProps = {};

export default Login;